<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Obaju : e-commerce template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="sourse/vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="sourse/vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="sourse/vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="sourse/vendor/owl.carousel/assets/owl.theme.default.css">
    <!-- theme stylesheet-->
    <link rel="stylesheet" href="sourse/css/style.default.css" id="theme-stylesheet">
    <!-- Custom stylesheet - for your changes-->
    <link rel="stylesheet" href="sourse/css/custom.css">
    <!-- Favicon-->
    <link rel="shortcut icon" href="favicon.png">
    <!-- Tweaks for older IEs--><!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
  </head>
  <body>
  <div id="all">
    <div id="content">
      <div class="container">
        <div class="row">
            <div id="basket" class="col-lg-9">
                <div class="box">
                <form method="get">
                    <h1>添加地址</h1>
<%--                    <div class="nav flex-column flex-md-row nav-pills text-center"><a href="checkout1.html" class="nav-link flex-sm-fill text-sm-center active"> <i class="fa fa-map-marker">                  </i>Address</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-truck">                       </i>Delivery Method</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-money">                      </i>Payment Method</a><a href="#" class="nav-link flex-sm-fill text-sm-center disabled"> <i class="fa fa-eye">                     </i>Order Review</a></div>--%>
                    <div class="content py-3">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="firstname">姓名</label>
                                    <input id="firstname" name="name" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!-- /.row-->
                        <div class="row">
                            <div class="col-md-3">
                                <div class="form-group">
                                    <label for="company">手机</label>
                                    <input id="company" name="phone" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!-- /.row-->
                        <input id="city" name="path" type="hidden" class="form-control">
                        <div class="row">
                            <div class="col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label for="city">省:</label>
                                    <select name="city1"></select>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label for="city">市:</label>
                                    <select name="city2"></select>
                                </div>
                            </div>
                            <div class="col-md-4 col-lg-3">
                                <div class="form-group">
                                    <label for="city">区(县)</label>
                                    <select name="city3"></select>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-group">
                                    <label for="phone">详细地址</label>
                                    <input id="phone" name="userAddress" type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                        <!-- /.row-->
                    </div>
                    <div class="box-footer d-flex justify-content-between"><a href="javascript:void(0)" id="closeAddr" class="btn btn-outline-secondary"><i class="fa fa-chevron-left"></i>关闭</a>
                        <button id="sub" type="button" class="btn btn-primary">添加<i class="fa fa-chevron-right"></i></button>
                    </div>
                </form>
            </div>
            <!-- /.box-->
          </div>
          <!-- /.col-lg-9-->
            <div class="col-lg-3">
                <div id="order-summary" class="card">
                    <div class="card-header">
                        <h3 class="mt-4 mb-4">订单摘要</h3>
                    </div>
                    <div class="card-body">
                        <p class="text-muted">按照实际价格计算</p>
                        <div class="table-responsive">
                            <table class="table">
                                <tbody>
                                <tr>
                                    <td>实付</td>
                                    <th>￥${newSum}</th>
                                </tr>
                                <tr>
                                    <td>折扣</td>
                                    <th>￥${sum-newSum}</th>
                                </tr>
                                <tr class="total">
                                    <td>总价</td>
                                    <th>￥${sum}</th>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
          <!-- /.col-md-3-->
        </div>
      </div>
    </div>
  </div>
    <!-- JavaScript files-->
  <script src="sourse/vendor/jquery/jquery.min.js"></script>
  <script src="sourse/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
  <script src="sourse/vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="sourse/vendor/owl.carousel/owl.carousel.min.js"></script>
  <script src="sourse/vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
  <script src="sourse/js/front.js"></script>
  <script type="text/javascript">
      function city1(){
          $.ajax({
              url: "queryProvince",
              type: "post",
              success:function (list) {
                  if(list != undefined){
                      for (var i in list){
                          $("select[name='city1']").append("<option value='"+list[i].pro_id+"'>"+list[i].pro_name+"</option>")
                      }
                      city2()
                  }
              },
              dataType:"json"
          })
      }
      function city2(){
          var id = $("select[name='city1']").val();
          $("select[name='city2']").html("")
          $("select[name='city3']").html("")
          $.ajax({
              url: "queryCity",
              data:{"id":id},
              type: "post",
              success:function (list) {
                  if(list != undefined){
                      id = list[0]
                      for (var i in list){
                          $("select[name='city2']").append("<option value='"+list[i].city_id+"'>"+list[i].city_name+"</option>")
                      }
                      city3()
                  }
              },
              dataType:"json"
          })
      }

      function city3(){
          var id = $("select[name='city2']").val();
          $("select[name='city3']").html("")
          $.ajax({
              url: "queryDistrict",
              data:{"id":id},
              type: "post",
              success:function (list) {
                  if(list != undefined){
                      for (var i in list){
                          $("select[name='city3']").append("<option value='"+list[i].dis_id+"'>"+list[i].dis_name+"</option>")
                      }
                  }
              },
              dataType:"json"
          })
      }
      city1();
      $("select[name='city1']").change(function () {
            city2()
      })
      $("select[name='city2']").change(function () {
            city3()
      })
      $("#closeAddr").click(function () {
          $("#dz",parent.document).attr("src","checkout3?goods="+$('#dz',parent.document).attr("name"))
      })
      $("#sub").click(function () {
          var sheng = $("option[value='"+ $("select[name='city1']").val()+"']").text();
          var shi = $("option[value='"+ $("select[name='city2']").val()+"']").text();
          var xian = $("option[value='"+ $("select[name='city3']").val()+"']").text();
          $("input[name='path']").val(sheng+shi+xian)
          if($("input[name='name']").val() == ""){
              alert("请输入收货人")
          }else if($("input[name='phone']").val() == ""){
              alert("请输入收货人手机")
          }else if($("input[name='path']").val() == ""){
              alert("请输入收货人地址")
          }else if($("input[name='userAddress']").val() == ""){
              alert("请输入收货人详细地址")
          }else{
              $.ajax({
                    type:"post",
                    url:"newAdders",
                    data:$("form").serializeArray(),
                    success:function (rels) {
                        if(rels != "-1"){
                            var lss = $("<li></li>");
                            lss.html("<input type='radio' checked name='addid' value='"+rels
                                +"' />姓名:"+$("input[name='name']").val()+"<br>手机:"+
                                $("input[name='phone']").val()+"<br>地址:"+
                                $("input[name='path']").val()+"<br>详细地址:"+
                                $("input[name='userAddress']").val())
                            $("#sssss",parent.document).append(lss)
                            $("#dz",parent.document).attr("src","checkout3?goods="+$('#dz',parent.document).attr("name"))
                        }else{
                            alert("添加失败")
                        }
                    }
              })
          }
      })
  </script>
  </div>
  </body>
</html>